<template>
    <div class="warning-list">
        <h2 class="title">预警类型列表</h2>
        <div class="filter">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="规则编号" prop="ruleNumber">
              <el-input
                v-model="queryParams.ruleNumber"
                placeholder="请输入规则编号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
            </div>
        <div class="table">
          <el-table
              :data="tableData"
              border
              style="width: 100%"
              header-cell-class-name="table-header-cell"
              :class="tableData.length === 0 ? 'table-empty' : ''" v-loading="loading" @selection-change="handleSelectionChange"
          >

            <el-table-column
              label="序号"
              type="index"
              width="80">
            </el-table-column>

            <el-table-column label="预警名称" align="center" prop="name" />
            <el-table-column label="预警数据源" align="center" prop="sourceDataType" >
              <template slot-scope="scope">
                <span v-if="scope.row.sourceDataType == '1'">就诊数据预警</span>
                <span v-else >医疗机构数据预警</span>
              </template>
            </el-table-column>
            <el-table-column label="预警总数" align="center" prop="total" />
            <el-table-column label="预警白名单" align="center" prop="enabled">
              <template slot-scope="scope">
                  <div class="whitelist">
                    <el-switch
                      v-model="scope.row.enabled=='0'?false:true"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="enableds(scope)"
                    >
                    </el-switch>
                  </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                  <div class="operation">
                      <div @click="handleView(scope)">查看</div>
                  </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
                  </div>
              </template>
              <script>
                import { listType, updateType } from "@/api/system/type";
export default {

    name: 'WarningList',
    data() {
        return {
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 【请填写功能名称】表格数据
          dockorList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            ruleNumber: null,
            time: null,
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
            keyword: '',
            drugType: null,
            drugOptions: [],
            tableConfig: [
                {
                    prop: 'order',
                    label: '序号',
                },
                {
                    prop: 'code',
                    label: '规则编号',
                },
                {
                    prop: 'name',
                    label: '预警名称',
                },
                {
                    prop: 'source',
                    label: '预警数据源',
                },
            ],
            tableData: [
                {
                    order: '01',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
                {
                    order: '02',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
            ]
        }
    },
  created() {
    this.getList()
  },
    methods: {
      enableds(data) {
        this.form = {
          "id": data.row.id,
          "enabled": data.row.enabled=='0'?1:0
        }
        updateType(this.form).then(response => {
          this.$modal.msgSuccess("更新成功");
          this.getList();
        });
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      getList() {
        this.loading = true;
        listType(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
        handleView(scope) {
          this.$router.push({ name: 'warningDetail', params: { number: scope.row}});
        }
    }
}
</script>
<style scoped lang="scss">
.warning-list {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 18px 0 24px;
}
.filter {
    display: flex;
    align-items: center;

    .el-select {
        width: 150px;
        height: 47px;
        margin-right: 11px;

        ::v-deep input {
            width: 150px;
            height: 47px;
        }
    }

    .search-input {
        width: 264px;
        height: 47px;
        background: #FFFFFF;
        border-radius: 5px;

        ::v-deep input {
            line-height: 45px;
            height: 47px;
            display: inline-block;
        }

        ::v-deep .el-input__icon {
            line-height: 45px;
            height: 45px;
            vertical-align: -0.15em;
            color: #4373F1;
        }
    }
}

.table {
    flex: 1;
    background-color: #fff;
    margin: 13px 0 16px;

    ::v-deep .table-header-cell {
        background-color: #EBEFF8;
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    .el-table {
        height: 100%;
    }
    ::v-deep .el-table__cell {
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    :v-deep .el-table__body-wrapper {
        height: 100%;
    }
    :v-deep .el-table__empty-block {
        height: 100%;
    }
    .operation {
        display: flex;
        align-items: center;
        height: 100%;

        .view {
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
            height: 16px;
            line-height: 16px;
            padding-left: 20px;
            background-repeat: no-repeat;
            background-position: 0 center;
            margin-right: 20px;
            user-select: none;
        }

        .view {
            background-image: url('~@/assets/images/table/view.png');
        }

    }
}
</style>
